<template>
    <div class="statement">
        <div style="height:200px;background-color: #f2f3f5;padding: 10px;">
            <layoutContent>
                <template #left>左侧</template>
                <template #right>右侧</template>
            </layoutContent>
        </div>
        <div style="height:200px;background-color: #f2f3f5;padding: 10px;">
            <layoutContent>
                <template #left>左侧</template>
                <template #search>搜索</template>
                <template #content>内容</template>
            </layoutContent>
        </div>
        <div style="height:200px;background-color: #f2f3f5;padding: 10px;">
            <layoutContent>
                <template #left>左侧</template> 
                <template #content>内容</template>
            </layoutContent>
        </div>
        <!-- 页面代码 源码 -->
        <dropWrap key="oreo">
            <pre><code class="language-js">{{ htm }} </code></pre>
        </dropWrap>
    </div>
</template>
<script lang="ts" setup>
    import layoutContent from "@/components/LayoutComponents/index.vue";
    import { ref,onMounted,nextTick } from 'vue';
    import dropWrap from "../dropWrap.vue";

    let htm = ref < string > (`
        引入组件 import layoutContent from "@/components/LayoutComponents/index.vue";
          1）  <layoutContent>
                    <template #left>左侧</template>
                    <template #right>右侧</template>
               </layoutContent>

          2）  <layoutContent>
                    <template #left>左侧</template>
                    <template #search>搜索</template>
                    <template #content>内容</template>
               </layoutContent>

           3）  <layoutContent>
                    <template #left>左侧</template> 
                    <template #content>内容</template>
                </layoutContent>
      `);

      /*  生命周期*/
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});
</script>